<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>车辆</title>
    <link rel="stylesheet" href="./fontbc-wd-cl/iconfont.css">
    <script src="./font2/iconfont.js"></script>
    <script src="./fontbc-wd-cl/iconfont.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .zcar {
            width: 100%;
            height: 680px;
            position: relative;

        }

        .head {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
        }

        .head-top {
            background-color: black;
            width: 100%;
            height: 60px;
            position: relative;
        }

        .head-top-f {
            font-size: 22px;
            font-weight: 500;
            color: white;
            letter-spacing: 1px;
            display: inline-block;
            margin-left: 150px;
            margin-top: 10px;
        }

        .head-top-i {
            float: right;
            margin-top: 17px;
            margin-right: 15px;

        }
        .head-top-i span{
            font-size: 23px;
            color: white;
        }

        .head-top-i img {
            vertical-align: middle;
        }


        .car-head{
            /* width: 100%; */
            margin: auto;
        }
        .car-function {
            width: 350px;
            font-weight: 600;
            letter-spacing: 1px;
            height: 30px;
            margin: auto;
            line-height: 30px;
            padding-top: 3px;
            font-size: 14px;
            background-image: url(images/车辆功能.png);
            background-repeat: no-repeat;
            background-position: right;
            /* vertical-align: middle; */


        }

        /* 车辆功能列表 */
        .fun-list {
            width: 350px;
            height: 80px;
            /* background-color: #7fffd4; */
            margin: auto;
            position: relative;
        }

        .funlist1 {

            width: 80px;
            height: 60px;
            border-right: 2px solid rgb(183, 183, 183);
            text-align: center;
            font-size: 12px;
            margin-top: 20px;
            font-weight: 500;
            display: inline-block;

        }

        .funlist4 {
            border: 0;
        }

        .fun-list-icon .icon {
            width: 30px;
            height: 30px;
            display: inline-block;

        }

        /* 服务中心样式 */
        .service {

            width: auto;
            position: relative;
            width: 350px;
            height: 130px;
            /* background-color: #781259; */
            margin: auto;
            position: relative;
            top: 30px;
            border: #f2f2f2 2px solid;
            /* 阴影效果 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 10px;

        }

        .ser-conter {
            position: absolute;
            margin-top: 10px;
            margin-left: 10px;
            font-size: 14px;
            color: rgb(62, 63, 63);
            letter-spacing: 2px;
            width: 300px;
            height: 25px;

        }

        .serv-list {
            width: 350px;
            height: 80px;
            margin: auto;
            margin-left: 5px;
            position: relative;
        }

        .serv1 {
            width: 80px;
            height: 60px;
            text-align: center;
            font-size: 12px;
            margin-top: 50px;
            font-weight: 500;
            display: inline-block;

        }



        .serv-list-icon .icon {
            width: 30px;
            height: 30px;
            display: inline-block;

        }

        /* 底部导航栏 */

        .icon {
            width: 1.5em;
            height: 1.5em;
            vertical-align: -0.15em;
            overflow: hidden;
            fill: #636161;

        }

        a {
            text-decoration: none;
        }

        body,
        ul,
        p {
            padding: 0;
            margin: 0;
        }

        .bnav ul {
            list-style: none;
        }

        .bnav {
            position: fixed;
            /* 固定 */
            left: 0;
            bottom: 0;
            z-index: 9;
            background-color: #f8f5f5;
            width: 100%;
        }

        body {
            margin-bottom: 50px;
            /* 防止最下面的内容看不到，
            和下导航一起出现，固定搭配 */
        }

        .bnav ul {
            display: flex;
            /* 弹性布局 */
        }

        .bnav li {
            position: relative;
            /* 相对定位 */
            width: 30%;
            text-align: center;
            /* 水平居中 */
        }

        .icon {
            font-style: 36px;
            margin: 5px 0;
        }

        .bnav p {
            color: #333;
            line-height: 26px;
            font-size: 10px;
            letter-spacing: 3px;
            /* 字边距 */
        }
    </style>
</head>

<body>
    <div class="zcar">
        <div class="head">
            <div class="head-top">
                <div class="head-top-f"></div>
                <div class="head-top-i">
                    <span class="iconfont icon-kefu"></span>&nbsp;
                    <span class="iconfont icon-xiaoxi"></span>
                </div>
            </div>
        </div>
        <div class="car-head">
            <img src="images/车辆头部图.jpg" alt="">
        </div>
        <div class="car-function">
            车辆功能
        </div>

        <!-- 车辆功能列表 -->
        <div class="fun-list">
            <div class="funlist1">
                <div class="fun-list-icon">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-suo"></use>
                    </svg>
                </div>
                锁止状态
            </div>
            <div class="funlist1">
                <div class="fun-list-icon">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chesuoding"></use>
                    </svg>
                </div>
                车辆状态
            </div>
            <div class="funlist1">
                <div class="fun-list-icon">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fadongjirunhuaxiqingxi
                        "></use>
                    </svg>
                </div>
                发动机
            </div>
            <div class="funlist1 funlist4">
                <div class="fun-list-icon">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiangxixingcheng"></use>
                    </svg>
                </div>
                行程数据
            </div>
        </div>

        <!-- 服务中心列表 -->
        <div class="service">
            <div class="ser-conter">服务中心</div>
            <div class="serv-list">
                <div class="serv1">
                    <div class="serv-list-icon">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-a-fenzu6"></use>
                        </svg>
                    </div>
                    服务预约
                </div>
                <div class="serv1">
                    <div class="serv-list-icon">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-l-dianhuaweihu"></use>
                        </svg>
                    </div>
                    道路救援
                </div>
                <div class="serv1">
                    <div class="serv-list-icon">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-cheliangmingxi_changneicheliangmingxi
                            "></use>
                        </svg>
                    </div>
                    取送服务
                </div>
                <div class="serv1">
                    <div class="serv-list-icon">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-a-daoqi2
                            "></use>
                        </svg>
                    </div>
                    车损上报
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <nav class="bnav">
            <ul>
                <li>
                    <a href="./index.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-yingyongchengxu"></use>
                        </svg>
                        <p>发现</p>

                    </a>
                </li>
                <li>
                    <a href="#">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-ditudaohang"></use>
                        </svg>
                        <p>地图</p>

                    </a>
                <li>
                    <a href="./car.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-Logo_Benz"></use>
                        </svg>
                        <p>车辆</p>
                        <span class="dot"></span>
                    </a>
                </li>
                <li>
                    <a href="./store.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-gouwudai"></use>
                        </svg>

                        <p>商店</p>
                    </a>
                </li>
                <li>
                    <a href="./mySelf.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-my"></use>
                        </svg>
                        <p>我的</p>
                    </a>
                </li>
            </ul>
        </nav>


    </div>
</body>

</html>